<%-- 
    Document   : index
    Created on : 10 nov. 2012, 17:48:21
    Author     : isen
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="d3.js"></script>
  

    </head>
    <body>
        <P><INPUT TYPE="BUTTON" NAME="jours" VALUE="-"
 ONCLICK='affichage("24")'><INPUT TYPE="BUTTON" NAME="jours" VALUE="jours"
 ONCLICK='affichage("24")'><INPUT TYPE="BUTTON" NAME="jours" VALUE="+"
 ONCLICK='affichage("24")'>      <INPUT TYPE="BUTTON" NAME="semaine" VALUE="-"
 ONCLICK='affichage("7")'> <INPUT TYPE="BUTTON" NAME="semaine" VALUE="semaine"
 ONCLICK='affichage("7")'> <INPUT TYPE="BUTTON" NAME="semaine" VALUE="+"
 ONCLICK='affichage("7")'>       <INPUT TYPE="BUTTON" NAME="mois" VALUE="-"
 ONCLICK='affichage("31")'><INPUT TYPE="BUTTON" NAME="mois" VALUE="mois"
 ONCLICK='affichage("31")'><INPUT TYPE="BUTTON" NAME="mois" VALUE="+"
 ONCLICK='affichage("31")'>       <INPUT TYPE="BUTTON" NAME="année" VALUE="-"
 ONCLICK='affichage("12")'><INPUT TYPE="BUTTON" NAME="année" VALUE="année"
 ONCLICK='affichage("12")'><INPUT TYPE="BUTTON" NAME="année" VALUE="+"
 ONCLICK='affichage("12")'>  </P>
        
         
        <script type="text/javascript">
       var same =12;
       var barPadding = 1;
       var data=[];
       for (var i=0; i<12; i+=1) { data.push(Math.floor(200* Math.random())); }
          var w = 750;
          var h=400;
          
                          
             var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
           
            var texts = svg.append("text").text(function(){return "Température sur l'année"}).attr("x",325).attr("y",10);
           var rects= svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x",function(d, i) {
    return i * (w / data.length);
})
   .attr("y", function(d) {
    return h - d;  //Height minus data value
})
   .attr("width", w / data.length - barPadding)
   .attr("height", function(d){return d*50;}).attr("fill", "teal").on("mouseover", function(){d3.select(this).style("fill", "red");})
   .on("mouseout", function(){d3.select(this).style("fill", "teal");})
   .on("mousedown", animate);
   
    
 function animate()
 {
     if(same==12)
         {
            affichage("31");
            return;
         }
     if(same==31)
         {
            affichage("24");
            return;
         }
      if(same==7)
          {
              affichage("24");
              return;
          }
 }
function affichage(nombre)
{
    
    var newData=[];
     for (var i=0; i<nombre; i++) { newData.push(Math.floor(100 * Math.random())); }
     
     svg.selectAll("text").remove();
                   svg.selectAll("text")
                    .data(newData)
                    .enter()
                    .append("text")
                    .text(function(d) {
                        return d;
                       })
                       .attr("x", function(d, i) {
                    return i * (w / newData.length);
                    })
                    .attr("y", function(d) {
                        return h - (d );
                        });
     
     
     
     if(same!=nombre)
         {
        same=nombre;     
      svg.selectAll("rect").remove();
      
     svg.selectAll("rect")
   .data(newData)
   .enter().append("rect")
   .attr("x",function(d, i) {
    return i * (w / newData.length);
   
})
   .attr("y", function(d) {
    return h - d;  //Height minus data value*
    
})
   .attr("width", w / newData.length - barPadding)
   .attr("height", function(d){return d*50;}).attr("fill", "teal").on("mouseover", function(){d3.select(this).style("fill", "red");})
    .on("mouseout", function(){d3.select(this).style("fill", "teal");}).on("mousedown", animate);;
   
         }
         else
             {
             svg.selectAll("rect").data(newData)
       .transition().duration(1000).delay(200)
   
   .attr("x",function(d, i) {
    return i * (w / newData.length);
   
})
   .attr("y", function(d) {
    return h - d;  //Height minus data value
})
   .attr("width", w / newData.length - barPadding)
   .attr("height", function(d){return d*50;}).attr("fill", "teal").on("mouseover", function(){d3.select(this).style("fill", "red");})
    .on("mouseout", function(){d3.select(this).style("fill", "teal");}).on("mousedown", animate);;
   ;
             }
             
             if(nombre==24)
                 {
                 
                 svg.append("text").text(function(){return "Température sur la journée"}).attr("x",325).attr("y",10);
                 }
             if(nombre==7)
                 {
                 
                 svg.append("text").text(function(){return "Température sur la semaine"}).attr("x",325).attr("y",10);
                 }
             if(nombre==31)
                 {
                 
                 svg.append("text").text(function(){return "Température sur le mois"}).attr("x",325).attr("y",10);
                 }
             if(nombre==12)
                 {
                  
                 svg.append("text").text(function(){return "Température sur l'année"}).attr("x",325).attr("y",10);
                 }
              
}



</script>
    </body>
   
</html>
